<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/index.css">
    <title>Products</title>
</head>
<body>
    <div class="container">
        <div class="main">
            <header>
                <hgroup>
                    <h1>我是主标题</h1>
                    <h2>我是副标题</h2>
                </hgroup>
                <p>我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题<br>
                   我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题</p>
            </header>
            <nav class="menu">
                <span class="menu-button" cursor="pointer">菜单 >></span>
                <ul>
                    <li><a href="#"> 主页 </a></li>
                    <li><a href="#"> 产品 </a></li>
                    <li><a href="#"> 项目 </a>
                        <ul>
                        <li><a href="#">Node.js</a>
                            <ul>
                                <li><a href="#">npm</a></li>
                                <li><a href="#">express</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Three.js</a></li>
                        <li><a href="#">CQRS.js</a></li>
                        </ul>
                    </li>
                    <li><a href="#"> 关于我们 </a></li>
                </ul>
            </nav>
            <div class="product-list">
                <h2>产品展示</h2>
                <div class="product">
                    <p>web全栈</p>
                    <img src="../pic/p.jpg" alt="">
                    <p>CSDN出品</p>
                </div>
            </div>
            <footer>
                <nav>
                    <a href="#">Companies</a>
                    <a href="#">Product Store</a>
                    <a href="#">Events</a>
                    <a href="#">Related Activities</a>
                </nav>
            </footer>
        </div>
        <div class="left"></div>
        <div class="right">
            <div class="rightf_box">广告位:
                    我们可以放一个带链接的图片当作广告，底部带有关闭文字 设置关闭特效
            </div>            
        </div>
    </div>
    <script type="text/javascript">
        const productDom = document.querySelector(".product");
        for (let i = 0; i < 20; i++) {
            let tempDom = productDom.cloneNode(true);
            productDom.insertAdjacentElement("afterend", tempDom);
        }

        const menuButton = document.querySelector(".menu-button");
        menuButton.addEventListener("click", function() {
            const ulDom = document.querySelector("nav.menu>ul");
            ulDom.classList.toggle("expanded");
        });
    </script>
</body>
</html>